var CPUXYS = [
{X: 0 , Y: -28},
{X: 12 , Y: -28},
{X: 25, Y: -24},
{X: 28 , Y: -14},
{X: 28 , Y: -3},
{X: 28 , Y: 6},
{X: 28 , Y: 17},
{X: 24 , Y: 26},
{X: 12 , Y: 28},
{X: 2 , Y: 28},
{X: -12 , Y: 28},
{X: -22 , Y: 26},
{X: -28 , Y: 16},
{X: -28 , Y: 2},
{X: -28 , Y: -8},
{X: -28 , Y: -18},
{X: -22 , Y: -24}
];

/*

 * */
var canvas = null;//全局变量 画布这个dom 绑定事件用
var context = null;//全局变量 画布这个对象 画东西用
// 	保存画布上所有的对象
var circles = [];
// 	画布原有的对象
var oldCircles = [];
//	画布上的线的对象
var lineObjs = [];
//	画布上所有的图片
var imgs = [];
//鼠标点击 如果选中一个元素 这个就是选中的那个元素
var previousSelectedCircle;
//选中的元素的初始位置
var chooseObjInitPlace = {};
// 折线
var dragLines = [];
var dragOneLines = [];
// 这时需要判断有没有连线连在这个元素上
var dragLines1 = [];
// 这时需要判断有没有连线连在这个元素上
var dragLines2 = [];
//是否在拖拽
var isDragging = false;
//鼠标放开了 判断一下落点是否有元素 如果有元素 拖动的元素归位 并且连线
var lineObj = null;
// 画线的时候 鼠标点击 如果选中一个元素 这个就是选中的那个元素 画线的开始的元素
var previousSelectedCircleStartLine;
// 画线的时候 鼠标点击 如果选中一个元素 这个就是选中的那个元素 画线的结束的元素
var previousSelectedCircleEndLine;
// 画布上所有的一级
var canvasAllLevel1 = [];
// 画布上所有的二级
var canvasAllLevel2 = [];
// 画布上所有的三级
var canvasAllLevel3 = [];
// 画布上所有的四级
var canvasAllLevel4 = [];
//画布类型 如果是1 代表一级为主机 二级为板卡 如果是2 代表一级为板卡 二级为处理单元
var canvasType = 1;
//拖拽的那个元素是否是初始化中的元素
var canvasIsInitDom = true;
//拖拽的元素的级别
var canvasTuoLevel = 0;
var canvasCurObjs=[];
var moveAllObjs={};
var isSecelctOneLine=false;
var oldDragLines=[];
var canvasAllLevelObj=[];

/**
 *	初始化画布
 *	参数: 宽 高
 *	x , y
 *	data.width , data.height
 *	data.x , data.y
 *	type : 画布类型
 *	fun1 : 连线时候的回调
 *	fun2 : 断开连线时候的回调
 * 	fun3 : 双击连线的时候回调
 *	fun4 : 双击图标的时候回调
 *	fun5 : 单击线回调 xm
 **/
var canvasInitData = {};
var isDashLine=false;

function init_canvas(data ,type , fun1 , fun2,fun3,fun4,fun5,fun6){
    canvasType = type;
    oldWidth=data.width;
    oldHeight=data.height;
    $(".table-box").append('<canvas style="position: absolute; top: ' + data.y + 'px;left : ' + data.x + 'px;" id="myCanvas" height="'+data.height+'"  width="'+data.width+'"></canvas>');
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext("2d");
    var funObj = {fun1:fun1,fun2:fun2,fun3:fun3,fun4:fun4,fun5:fun5,fun6:fun6};
    $(canvas).bind('mousedown', canvasClick);
    $(canvas).bind('mousedown',funObj, canvasLevel3Click);
    $(canvas).bind('mouseup' , funObj , outMouseDragging);
    $(canvas).bind('mouseout' , funObj , outMouseDragging);
    $(canvas).bind('mousemove' , dragCircle);
    $(canvas).bind('dblclick' , funObj , canvasDbClick);
    $(canvas).bind('dblclick' , funObj , appDbClick);
    $(canvas).bind('click' , canvasClick1);
    canvasInitData.data = data;
    canvasInitData.fun1 = fun1;
    canvasInitData.fun2 = fun2;
    
    drawCircles();
}
/*缩放
 * */
var zoomIndex = 1;
function viewBig(){
	var oldWidth=document.getElementsByTagName("canvas")[0].getAttribute("width");
	var oldHeight=document.getElementsByTagName("canvas")[0].getAttribute("height");
	var oldWidth2=$('#myCanvas').width();
	var oldHeight2=$('#myCanvas').height();
  	zoomIndex += 0.1;
  	$('#myCanvas').css("width",oldWidth*zoomIndex);
    $('#myCanvas').css("height",oldHeight*zoomIndex);
  	 if(oldWidth2>oldWidth){
         $(".table-box").scrollLeft(+oldWidth*0.1);
     }
  	if(oldHeight2>oldHeight){
        $(".table-box").scrollTop(+oldWidth*0.1);
    }
}
function showSmall(){
	var oldWidth=document.getElementsByTagName("canvas")[0].getAttribute("width");
	var oldHeight=document.getElementsByTagName("canvas")[0].getAttribute("height");
	var oldWidth2=$('#myCanvas').width();
	var oldHeight2=$('#myCanvas').height();
  	zoomIndex -= 0.1 ;
  	$('#myCanvas').css("width",oldWidth*zoomIndex);
    $('#myCanvas').css("height",oldHeight*zoomIndex);
    if(oldWidth2>oldWidth){
        $(".table-box").scrollLeft(-oldWidth*0.1);
    }
    if(oldHeight2>oldHeight){
        $(".table-box").scrollTop(-oldWidth*0.1);
    }
}
/**
 *	对画板上的对象重新操作后 进行重绘的方法
 */
function drawCircles() {
    // 清除画布，准备绘制
	
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.setLineDash([1,0]);

    // 遍历所有一级 还有title和count
    for(var i=0; i<canvasAllLevel1.length; i++) {
        var circle = canvasAllLevel1[i];

        // 绘制对象
        context.beginPath();
        context.fillStyle = "#F7F8FA";
        context.strokeStyle = "#3E4C5A";
        context.shadowColor = "#EEEFF1";
        context.lineWidth = 0;
        context.shadowBlur =10;
        drawOneImage(circle.img , circle.x, circle.y+40,circle.width , circle.height);
        if(circle.text != null){
            drawOneFont(circle);
        }
        context.fill();
        context.fillRect(circle.x,circle.y ,circle.width , circle.height);
        // context.lineWidth = 0.5;
        if(circle.title!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect(circle);
        }
        drawOneImage('../images/main.png', circle.x+25, circle.y+20,10 , 10, null);
        context.stroke();
        context.beginPath();
        context.fillStyle = "#eeeeee";
        context.strokeStyle ='#FFFFFF';  //设置线的颜色状态
        context.shadowBlur =0;
        doLine3(circle.x+20,circle.y+50,circle.x+circle.width-20,circle.y+50);
        context.stroke();
    }

    // 遍历所有二级
    for(var i=0; i<canvasAllLevel2.length; i++) {
        var circle = canvasAllLevel2[i];
        // 绘制对象
        context.beginPath();
        context.lineWidth = 0;
        context.fillStyle = "#F9FAFC";
        context.strokeStyle = "#FFFFFF";
        context.shadowColor = "#EEEFF1";
        context.shadowBlur =10;
        context.setLineDash([1,0]);
        context.fillRect(circle.x,circle.y ,circle.width , circle.height);
        drawOneImage(circle.img , circle.x, circle.y,circle.width-20 , circle.height-20);

        context.fill();
        if(circle.text != null){
            drawOneFont(circle);
            //绘制
        }
        context.rect(circle.x,circle.y ,circle.width , circle.height);

        if(circle.title2!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect2(circle);
        }
        drawOneImage('../images/board.png', circle.x+15, circle.y+15,10 , 10, null);
        context.stroke();
        
        context.beginPath();
        context.fillStyle = "#eeeeee";
        context.strokeStyle ='#FFFFFF';  //设置线的颜色状态
        context.shadowBlur =0;
        doLine3(circle.x+15,circle.y+40,circle.x+circle.width-15,circle.y+40);
        context.stroke();
    }

    // 遍历所有三级
    for(var i=0; i<canvasAllLevel3.length; i++) {
        var circle = canvasAllLevel3[i];
        // 绘制对象
        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
        }else if(circle.text != null){
            drawOneFont(circle);
            //绘制
        }else{

            context.fillStyle = "#eeeeee";
            context.strokeStyle = "#FFFFFF";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        if(circle.title2!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect3(circle);
        }
        context.lineWidth = 0;
        context.setLineDash([1,0]);
        context.fill();
        context.stroke();
    }
    // 遍历所有四级
    for(var i=0; i<canvasAllLevel4.length; i++) {
        var circle = canvasAllLevel4[i];
        // 绘制对象

        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
        }else if(circle.text != null){
            drawOneFont(circle);
            //绘制
        }else{
            context.setLineDash([1,0]);
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "#FFFFFF";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        if(circle.title2!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect4(circle);
        }
        context.fillStyle = "#eeeeee";
        context.strokeStyle = "black";
        context.fill();
        context.stroke();
    }
  /*  // 遍历所有框
    for(var i=0; i<canvasAllLevelObj.length; i++) {
    	 var circle = canvasAllLevelObj[i];
         // 绘制对象
         context.beginPath();
         context.lineWidth = 1;
         context.setLineDash([1,0]);
         if(circle.color){
             context.strokeStyle = circle.color;
         }else{
             context.strokeStyle = '#eeeeee';
         }
         context.strokeRect(circle.x,circle.y ,circle.width , circle.height);
         context.stroke();
    }*/
    //遍历所有线的对象
    for(var i=0; i<lineObjs.length; i++) {
        var lineObj = lineObjs[i];
        // 绘制线
        DrawLine(lineObj.obj1 , lineObj.obj2 , lineObj.count , context);
    }
    //十字画线的时候 执行画线
    if(drawLineObj != null && drawLineObj.startx!=null){
        DrawLine2(drawLineObj , context);
    }
    if(moveAllObjs.isDrag){
    	context.beginPath();
        context.lineWidth = 1;
        context.setLineDash([10,5]);
        context.strokeStyle = 'black';
        context.strokeRect(moveAllObjs.x,moveAllObjs.y ,moveAllObjs.width , moveAllObjs.height);
        context.stroke();
    }
}
/**
 *右键菜单
 */
function canvasLevel3Click(e){
 
}
/**
 *画布双击,查询是否点击的app
 */
function appDbClick(e){
}
/**
 * 	画布双击 查询是否有点击的连线
 */
function canvasDbClick(e){
 
}
/**画主机板卡横线*/
function doLine3(str1,str2,end1,end2){
    context.beginPath();
	context.moveTo (str1,str2);       //设置起点状态
	context.lineTo (end1,end2);       //设置末端状态
	context.lineWidth = 1;          //设置线宽状态
	context.strokeStyle ='#E8E9EB';  //设置线的颜色状态
	context.stroke(); 
}
/**
 *	画一个一级元素   需要带title count
 */
function drawOneRect(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);

    context.lineWidth = 2;
    context.font = "14px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#FFFFFF";
    context.fillText(circle.title, circle.x+40, circle.y+30)

    var text = '';
    if(canvasType == 1 || canvasType == 3){
        text = circle.count +'个板卡';
    }else if(canvasType == 2){
        text = circle.count +'个单元';
    }
    context.fillStyle = "#999999";
    context.fillText(text, circle.x -20+ circle.width - 50, circle.y+30)

}
/**
 *	画一个二级元素   需要带title count
 */
function drawOneRect2(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);
    var curTile=circle.title2;
    if(curTile.length>5){
    	curTile=curTile.substring(0,5)+'…';
    }
    
    context.lineWidth = 2;
    context.font = "12px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#FFFFFF";
    context.fillText(curTile, circle.x+30, circle.y+25)

    var text = '';
    if(canvasType == 2 || canvasType == 3){
        text = circle.count +'个单元';
    }else if(canvasType == 3){
        text = circle.count +'个单元';
    }
    context.fillStyle = "#999999";
    context.fillText(text, circle.x -20+ circle.width - 40, circle.y+25)
    //context.fillText(circle.title3, circle.width - 25, circle.y+25)
}
/**
 *	画一个三级元素   需要带title count
 */
function drawOneRect3(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);

    context.lineWidth = 2;
    context.font = "12px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#FFFFFF";
    context.fillText(circle.title2, circle.x+15, circle.y+circle.height+25)
}
/**
 *	画一个四级元素   需要带title count
 */
function drawOneRect4(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);

    context.lineWidth = 2;
    context.font = "12px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#FFFFFF";
    context.fillText(circle.title2, circle.x+15, circle.y+circle.height+25)
}
/**
 *	写文字
 */
function drawOneFont(circle){
    //设置样式
    context.lineWidth = 2;
    context.font = "14px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#F5270B";
    context.fillText(circle.text, circle.x, circle.y)
}

/**
 *	画一张图片 这张图片如果是未加载的 等待加载后 加入到内存中
 */
function drawOneImage(imgSrc , x , y ,width, height,fun){
    if(imgSrc != null){
		if(imgs[imgSrc]==null){
			var img = new Image()
			img.src = imgSrc;
			img.onload = function(){
				imgs[imgSrc] = img;
				context.drawImage(img, x, y,width,height);
			}
		} else {
			context.drawImage(imgs[imgSrc], x, y,width,height);
		}
		if(fun){
			fun();
		}
	}
}
/**
 * 	画布单击 查询是否有点击的元素
 */
var isClickOne=false;
function canvasClick1(e){
	isClickOne=true;
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320+curX;
    var clickY = e.pageY - canvas.offsetTop-70+curY;
    clickX = accDiv(clickX, zoomIndex);
    clickY = accDiv(clickY, zoomIndex);
    isChooseOneObj = false;
	isChooseLevel3=false;
	isChooseLevel2=false;
	isChooseLevel1=false;
	isExpandLevel1=false;
	isExpandLevel2=false;
	moveAllObjs={};
    moveAllObjs.isDrag=false;
        //判断选中的是几级
        //选择cpu
    	var clickLevel1=false;
    	var clickLevel2=false;
    	var clickLevel3=false;
		 for(var i = 0 ; i < canvasAllLevel3.length; i++) {
		        var circle = canvasAllLevel3[i];
		        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
		            //选中了这个元素
			         addCanvasAllLevelObj(circle.id,3);
		        	clickLevel3=true;
	               // drawCircles();
		            break;
		        }
		    }
		    //选择板卡
		 if(!clickLevel3){
			 for(var i = 0 ; i < canvasAllLevel2.length; i++) {
			        var circle = canvasAllLevel2[i];
			        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
			            //选中了这个元素
			            addCanvasAllLevelObj(circle.board.id,2);
			        	clickLevel2=true;
		               // drawCircles();
			            break;
			        }
			    }
			 if(!clickLevel2){
				 //选择主机
				   for(var i = 0 ; i < canvasAllLevel1.length; i++) {
				       var circle = canvasAllLevel1[i];
				       if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
				           //选中了这个元素
				            addCanvasAllLevelObj(circle.machineBox.id,1);
				        	clickLevel1=true;
			               // drawCircles();
				            break;
				       }
				   }
			 }
		 }
}
/**
 *	点击画布 查找有无选中的对象
 *
 */
var mouseInitX = 0;
var mouseInitY = 0;
var isChooseOneObj = false;
var isChooseLevel3=false;
var isChooseLevel2=false;
var isChooseLevel1=false;
var isExpandLevel1=false;
var isExpandLevel2=false;
var isPolyline=false;
var expandLevel1=[];
var expandLevel2=[];

function canvasClick(e) {
	if(!isClickOne){
		isClickOne=false;
		return false;
	}else{
		isChooseOneObj = false;
		isChooseLevel3=false;
		isChooseLevel2=false;
		isChooseLevel1=false;
		isExpandLevel1=false;
		isExpandLevel2=false;
		moveAllObjs={};
	    moveAllObjs.isDrag=false;
	    // 取得画布上被单击的点
		var curX=$(".table-box").scrollLeft();
		var curY=$(".table-box").scrollTop();
	    var clickX = e.pageX - canvas.offsetLeft-320+curX;
	    var clickY = e.pageY - canvas.offsetTop-70+curY;
	    clickX = accDiv(clickX, zoomIndex);
	    clickY = accDiv(clickY, zoomIndex);

	    mouseInitX = clickX;
	    mouseInitY = clickY;
	    //遍历所有线的对象 查询 x y 坐标在双击时 鼠标的位置
	    for(var i = 0 ; i < dragLines.length ; i++){
	        var obj = dragLines[i];
	        var x1 = obj.leftX;
	        var x2 = obj.rightX;
	        var y1 = obj.leftY;
	        var y2 = obj.rightY
	        var bigY = y2>y1?y2:y1;
	    	var smallY = y2<y1?y2:y1;
	    	var bigX = x2>x1?x2:x1;
	    	var smallX = x2<x1?x2:x1;
	    	if(clickX<bigX+5&&clickX>smallX-5&&clickY<bigY+5&&clickY>smallY-5){
	    		if(x2==x1||y2==y1){
	    			//点到线了
	                    //说明点到线了
	                	var linkObj={};
	    				linkObj.lineId = obj.lineId;
	    				linkObj.obj1 ={x:obj.leftX,y:obj.leftY};
	    				linkObj.obj2 ={x: obj.rightX,y:obj.rightY};
	                	isSecelctOneLine=true;
	                	isPolyline=true;
	                	dragOneLines.push(linkObj);
	            }else{
	            	var k = (y2-y1)/(x2-x1);
	            	var b = y2-k*x2;
	            	var curY = clickX * k + b;
	            	if(clickY>curY-5&&clickY<curY+5){
	            		//点到线了
	                        //说明点到线了
	            		var linkObj={};
	            		linkObj.lineId = obj.lineId;
	    				linkObj.obj1 ={x:obj.leftX,y:obj.leftY};
	    				linkObj.obj2 ={x: obj.rightX,y:obj.rightY};
	                	isSecelctOneLine=true;
	                	isPolyline=true;
	                	dragOneLines.push(linkObj);
	            	}
	            }
	    	}
	    }
	    //选中的是原始直线
	    if(!isPolyline){
	    	 for(var i = 0 ; i < lineObjs.length ; i++){
	    	        var obj1 = lineObjs[i].obj1;
	    	        var obj2 = lineObjs[i].obj2;
	    	        var x1 = obj1.x;
	    	        var x2 = obj2.x;
	    	        var y1 = obj1.y;
	    	        var y2 = obj2.y;
	    	        var bigY = y2>y1?y2:y1;
	    	    	var smallY = y2<y1?y2:y1;
	    	    	var bigX = x2>x1?x2:x1;
	    	    	var smallX = x2<x1?x2:x1;
	    	    	if(clickX<bigX+5&&clickX>smallX-5&&clickY<bigY+5&&clickY>smallY-5){
	    	    		if(x2==x1||y2==y1){
	    	    			//点到线了
	    	                    //说明点到线了
	    	                	var linkObj;
	    	                	for(var j=0;j<lineObjs.length;j++){
	    	                		if(lineObjs[i].obj1.id==obj1.id){
	    	                			if(lineObjs[i].obj2.id==obj2.id){
	    	                				lineObjs[i].lineId=lineObjs[i].param.id;
	    	                				linkObj = lineObjs[i];
	    	                			}
	    	                		}else if(lineObjs[i].obj1.id==obj2.id){
	    	                			if(lineObjs[i].obj2.id==obj1.id){
	    	                				lineObjs[i].lineId=lineObjs[i].param.id;
	    	                				linkObj = lineObjs[i];
	    	                			}
	    	                		}
	    	                	}
	    	                	isSecelctOneLine=true;
	    	                	dragOneLines.push(lineObjs[i]);
	    	            }else{
	    	            	var k = (y2-y1)/(x2-x1);
	    	            	var b = y2-k*x2;
	    	            	var curY = clickX * k + b;
	    	            	if(clickY>curY-5&&clickY<curY+5){
	    	            		//点到线了
	    	                        //说明点到线了
	    	                    	var linkObj;
	    	                    	for(var j=0;j<lineObjs.length;j++){
	    	                    		if(lineObjs[i].obj1.id==obj1.id){
	    	                    			if(lineObjs[i].obj2.id==obj2.id){
	    	                    				lineObjs[i].lineId=lineObjs[i].param.id;
	    	                    				linkObj = lineObjs[i];
	    	                    			}
	    	                    		}else if(lineObjs[i].obj1.id==obj2.id){
	    	                    			if(lineObjs[i].obj2.id==obj1.id){
	    	                    				lineObjs[i].lineId=lineObjs[i].param.id;
	    	                    				linkObj = lineObjs[i];
	    	                    			}
	    	                    		}
	    	                    	}
	    	                    	isSecelctOneLine=true;
	    	                    	dragOneLines.push(lineObjs[i]);
	    	            	}
	    	            }
	    	    	}
	    	    }
	    }
	    
	    if(isSecelctOneLine==false){
	        //选择cpu
			 for(var i = 0 ; i < canvasAllLevel3.length; i++) {
			        var circle = canvasAllLevel3[i];
			        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
			            //选中了这个元素
			            isChooseOneObj = true;
			            isChooseLevel3=true;
			            isChooseLevel2=false;
			            isChooseLevel1=false;
			            addCanvasAllLevelObj(circle.id,3);
			        }
			        // 判断这个点是否在对象中
			        if(isChooseOneObj&&!isChooseLevel1&&!isChooseLevel2){
			            // 清除之前选择的对象
			            previousSelectedCircle = circle;
			            canvasTuoLevel = previousSelectedCircle.level;
			            //更新显示
			           // drawCircles();
			            chooseObjInitPlace.x = circle.x;
			            chooseObjInitPlace.y = circle.y;
			            moveAllObjs.id=circle.id;
			            moveAllObjs.x_=circle.x_;
			            moveAllObjs.x=circle.x;
			            moveAllObjs._x=clickX-circle.x;
			            moveAllObjs._y=clickY-circle.y;
			            moveAllObjs.y_=circle.y_;
			            moveAllObjs.y=circle.y;
			            moveAllObjs.width=circle.width;
			            moveAllObjs.height=circle.height;
			            moveAllObjs.params=circle.params;
			            moveAllObjs.oldIndex=i;

			            moveAllObjs.isDrag=true;
			            moveAllObjs.isDragLevle3=true;

			            //停止搜索
			            return;
			        }else{
			        	moveAllObjs={};
			            previousSelectedCircle = null;
			            canvasTuoLevel = 0;
			            chooseObjInitPlace = {};
			        }
			    }
			    //选择板卡
			   for(var i = 0 ; i < canvasAllLevel2.length; i++) {
			        var circle = canvasAllLevel2[i];
			        //initDomPlace(canvasAllLevel2 , i);
			        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
			            //选中了这个元素
			            isChooseOneObj = true;
			            isChooseLevel3=false;
			            isChooseLevel2=true;
			            isChooseLevel1=false;
			            addCanvasAllLevelObj(circle.board.id,2);

			        }
			        if(clickX >= circle.x + circle.width-20 && clickX <= circle.x + circle.width && clickY >= circle.y + circle.height-20 && clickY <= circle.y + circle.height){
			            //选中了这个元素
			        	isExpandLevel2=true;
			        	isChooseLevel2=false;
			        	isChooseOneObj=false;
			        	expandLevel2=circle;
			        }
			        // 判断这个点是否在对象中
			        if(isChooseOneObj&&!isChooseLevel1&&!isChooseLevel3){
			            // 清除之前选择的对象
			            previousSelectedCircle = circle;
			            canvasTuoLevel = previousSelectedCircle.level;
			           
			            // 使对象允许拖拽
			            if(e.which!=3){
			                isDragging = true;
			            }

			            //更新显示
			           // drawCircles();
			            chooseObjInitPlace.x = circle.x;
			            chooseObjInitPlace.y = circle.y;
			            moveAllObjs.id=circle.board.id;
			            moveAllObjs.x=circle.x;
			            moveAllObjs._x=clickX-circle.x;
			            moveAllObjs._y=clickY-circle.y;
			            moveAllObjs.x_=circle.x_;
			            moveAllObjs.y_=circle.y_;
			            moveAllObjs.y=circle.y;
			            moveAllObjs.width=circle.width;
			            moveAllObjs.height=circle.height;
			            moveAllObjs.board=circle.board;
			            moveAllObjs.oldIndex=i;

			            moveAllObjs.isDrag=true;
			            moveAllObjs.isDragLevle2=true;

			            //停止搜索
			            return;
			        }else{
			        	moveAllObjs={};
			            previousSelectedCircle = null;
			            canvasTuoLevel = 0;
			            chooseObjInitPlace = {};
			        }
			    }
			   //选择主机
			   if(!isExpandLevel2){
				   for(var i = 0 ; i < canvasAllLevel1.length; i++) {
				       var circle = canvasAllLevel1[i];
				      // initDomPlace(canvasAllLevel1 , i);
				       if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
				           //选中了这个元素
				           isChooseOneObj = true;
				           isChooseLevel3=false;
				           isChooseLevel2=false;
				           isChooseLevel1=true;
				            addCanvasAllLevelObj(circle.machineBox.id,1);

				       }
				       if(clickX >= circle.x + circle.width-20 && clickX <= circle.x + circle.width && clickY >= circle.y + circle.height-20 && clickY <= circle.y + circle.height){
				           //选中了这个元素
				           isChooseOneObj = false;
				           isChooseLevel3=false;
				           isChooseLevel2=false;
				           isChooseLevel1=false;
				           isExpandLevel1=true;
				           expandLevel1=circle;
				       }
				       // 判断这个点是否在对象中
				       if(isChooseOneObj&&!isChooseLevel2&&!isChooseLevel3){
				           // 清除之前选择的对象
				           previousSelectedCircle = circle;
				         
				           // 使对象允许拖拽
				           if(e.which!=3){
				               isDragging = true;
				           }
				           //更新显示
				          // drawCircles();
				           chooseObjInitPlace.x = circle.x;
				           chooseObjInitPlace.y = circle.y;
				           moveAllObjs.id=circle.machineBox.id;
				           moveAllObjs._x=clickX-circle.x;
				           moveAllObjs._y=clickY-circle.y;
				           moveAllObjs.x=circle.x;
				           moveAllObjs.x_=circle.x_;
				           moveAllObjs.y=circle.y;
				           moveAllObjs.y_=circle.y_;
				           moveAllObjs.width=circle.width;
				           moveAllObjs.height=circle.height;
				           moveAllObjs.machineBox=circle.machineBox;
				           moveAllObjs.oldIndex=i;
				           
				           moveAllObjs.isDrag=true;
				           moveAllObjs.isDragLevle1=true;

				           //停止搜索
				           return;
				       }else{
				       moveAllObjs={};
				       previousSelectedCircle = null;
				       canvasTuoLevel = 0;
				       chooseObjInitPlace = {};
				       }
				   }
			   }
		}
	}
	
}
/**
 *	点击画布的时候 记录一下原有元素的位置 用于连线
 *	是否需要记录点击元素的原有位置 暂未使用
 */
function initDomPlace(circles , index){
    oldCircles = new Array();
    for(var i = 0 ; i < circles.length ; i++){
        if(i == index){
            continue;
        }
        var circleObj = {};
        circleObj.x = circles[i].x;
        circleObj.y = circles[i].y;
        circleObj.img = circles[i].img;
        circleObj.width = circles[i].width;
        circleObj.height = circles[i].height;
        circleObj.id = circles[i].id;
        oldCircles.push(circleObj);
    }
}
/**
 * 拖拽元素
 */
var canvasClickBoolean = false;
function dragCircle(e) {
	var isHoverSelect2=false;
	var isHoverSelect1=false;
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320+curX;
    var clickY = e.pageY - canvas.offsetTop-70+curY;
    
    
    //hover
    if(!isHoverSelect2&&!isHoverSelect1){
		for(var i = 0 ; i < canvasAllLevel2.length; i++) {
	        var circle = canvasAllLevel2[i];
	        //initDomPlace(canvasAllLevel2 , i);
	        if(clickX >= circle.x + circle.width-20 && clickX <= circle.x + circle.width && clickY >= circle.y + circle.height-20 && clickY <= circle.y + circle.height){
	            //选中了这个元素
	            document.getElementById('myCanvas').style.cursor='se-resize';
	            isHoverSelect2=true;
	            break;
	        }
	  }
		if(!isHoverSelect2){
	     document.getElementById('myCanvas').style.cursor='default';
		}
		//主机hover
		for(var i = 0 ; i < canvasAllLevel1.length; i++) {
		       var circle = canvasAllLevel1[i];
		      
		       if(clickX >= circle.x + circle.width-20 && clickX <= circle.x + circle.width && clickY >= circle.y + circle.height-20 && clickY <= circle.y + circle.height){
		           //选中了这个元素
		    	   //选中了这个元素
		            document.getElementById('myCanvas').style.cursor='se-resize';
		            isHoverSelect1=true;
		            break;
		       }
		}
		if(!isHoverSelect1&&!isHoverSelect2){
	     document.getElementById('myCanvas').style.cursor='default';
		}
    	
    }
    
	//alert(1);
	if(!isClickOne){
		 isHoverSelect2=false;
		 isHoverSelect1=false;
		isClickOne=false;
		return false;
	}else{
		 isHoverSelect2=false;
		 isHoverSelect1=false;
		cancelChoose();
		var curX=$(".table-box").scrollLeft();
		var curY=$(".table-box").scrollTop();
	    var clickX = e.pageX - canvas.offsetLeft-320+curX;
	    var clickY = e.pageY - canvas.offsetTop-70+curY;
	    clickX = accDiv(clickX, zoomIndex);
	    clickY = accDiv(clickY, zoomIndex);
		if(canvasClickBoolean){
	        canvasClickBoolean = false;
	        return;
	    }
		var type=e.which;
	    if(type==3){
	    	canvasClickBoolean = false;
	        return false;
	    }else{ // 判断对象是否开始拖拽
	        if (moveAllObjs.isDrag) {
	            // 判断拖拽对象是否存在
	            if (moveAllObjs != null) {
	                // 取得鼠标位置
	                // 将对象移动到鼠标位置
	                moveAllObjs.x = clickX - moveAllObjs._x;
	                moveAllObjs.y = clickY - moveAllObjs._y;
	                if(moveAllObjs.isDragLevle1){
	                	var height = canvas.height;
	               		if(moveAllObjs.y +moveAllObjs.height +40> height){
	               			canvas.height = moveAllObjs.y + moveAllObjs.height+60;
	               		}
	               	    var width = canvas.width;
	               		if(moveAllObjs.x +moveAllObjs.width +40> width){
	               			canvas.width = moveAllObjs.x + moveAllObjs.width+60;
	               		}
	                }
	                // 更新画布
	               drawCircles();
	            }
	        }
	       if(isExpandLevel2){
	    	   for(var i = 0 ; i < canvasAllLevel1.length; i++) {
	   	    	var circle = canvasAllLevel1[i];
	   	    	if(clickX >= circle.x && clickX<= circle.x + circle.width && clickY >= circle.y && clickY<= circle.y + circle.height 
	   	    			&& circle.id==expandLevel2.board.machineBoxId){
	   	    		var maxCircle=[];
	   	    		var curMaxWidth=null;
	   	    		var curMaxHeight=null;
	   	    		for(var i2=0;i2<canvasAllLevel3.length;i2++){
	   	    			if(canvasAllLevel3[i2].params.boardId==expandLevel2.board.id){
	   	    				maxCircle.push(canvasAllLevel3[i2]);
	   	    			}
	   	    		}
	   	    		for(var i4=0;i4<maxCircle.length;i4++){
	   	    			curMaxWidth=maxCircle[0].x+maxCircle[0].width;
	   	   	    		curMaxHeight=maxCircle[0].y+maxCircle[0].height;
	   	   	    		if(curMaxWidth<maxCircle[i4].x+maxCircle[i4].width){
	   	   	    		curMaxWidth=maxCircle[i4].x+maxCircle[i4].width;
	   	   	    		}
	   	   	    		if(curMaxHeight<maxCircle[i4].x+maxCircle[i4].height){
	   	   	    			curMaxHeight=maxCircle[i4].y+maxCircle[i4].height;
		   	    		}
	   	    		}
	   	    		
		   	    	 expandLevel2.width += clickX - expandLevel2.x-expandLevel2.width;
		   	    	 expandLevel2.height += clickY - expandLevel2.y-expandLevel2.height;
		   	    	
		             // 更新画布
		   	    	 if(clickX  < curMaxWidth ||clickY < curMaxHeight){
		   	    		 maxCircle=[];
		   	    		 break;
		   	    	 }else{
		   	    		drawCircles();
		   	    		maxCircle=[];
		   		        break;
		   	    	 }
		            
	   	    	}
	   	    }
	       }
	       if(isExpandLevel1){
	    	   
	    	   expandLevel1.width += clickX - expandLevel1.x-expandLevel1.width;
	    	   expandLevel1.height += clickY - expandLevel1.y-expandLevel1.height;
	    	   var height = canvas.height;
	    		if(expandLevel1.y +expandLevel1.height +40> height){
	    			canvas.height = expandLevel1.y + expandLevel1.height+60;
	    		}
	    	    var width = canvas.width;
	    		if(expandLevel1.x +expandLevel1.width +40> width){
	    			canvas.width = expandLevel1.x + expandLevel1.width+60;
	    		}
	    		var maxCircle=[];
		    		var curMaxWidth=0;
		    		var curMaxHeight=0;
		    		for(var i2=0;i2<canvasAllLevel2.length;i2++){
		    			if(canvasAllLevel2[i2].board.machineBoxId==expandLevel1.machineBox.id){
		    				maxCircle.push(canvasAllLevel2[i2]);
		    			}
		    		}
		    		/*curMaxWidth=maxCircle[0].x+maxCircle[0].width;
	   	    		curMaxHeight=maxCircle[0].y+maxCircle[0].height;*/
		    		for(var i4=0;i4<maxCircle.length;i4++){
		   	    		if(curMaxWidth<maxCircle[i4].x+maxCircle[i4].width){
		   	    		curMaxWidth=maxCircle[i4].x+maxCircle[i4].width;
		   	    		}
		   	    		if(curMaxHeight<maxCircle[i4].y+maxCircle[i4].height){
		   	    			curMaxHeight=maxCircle[i4].y+maxCircle[i4].height;
	   	    		}
		    		}
		    		
	   	    	/* expandLevel2.width += clickX - expandLevel2.x-expandLevel2.width;
	   	    	 expandLevel2.height += clickY - expandLevel2.y-expandLevel2.height;*/
	             // 更新画布curX
	   	    	 if(clickX  < curMaxWidth ||clickY < curMaxHeight){
	   	    		 maxCircle=[];
	   	    		 return;
	   	    	 }else{
	   	    		drawCircles();
	   	    		maxCircle=[];
	   		        return;
	   	    	 }
	           // 更新画布
	         // drawCircles();
	       }
	   }
	}
	
}
/**
 *	停止拖拽的时候触发的事件
 *	查看拖拽的元素 放开的时候 是否在某个一级中 如果在的话 触发事件 新增一个二级元素 并且在固定位置
 */

function outMouseDragging(e){
	var isChooseOneObj=false;
    moveAllObjs.isDrag=false;
    isExpandLevel2=false;
    isExpandLevel1=false;
    isDragging = false;
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320+curX;
    var clickY = e.pageY - canvas.offsetTop-70+curY;
    clickX = accDiv(clickX, zoomIndex);
    clickY = accDiv(clickY, zoomIndex);
   // drawCircles();
    //画折线
    if(isSecelctOneLine){
 	   isSecelctOneLine=false;
 	   var oldLine=dragOneLines[0];
 	  var newLineObjs=lineObjs;
	   lineObjs=[];
	   for(var l5=0;l5<newLineObjs.length;l5++){
		   if(newLineObjs[l5].param.id!=oldLine.lineId){
			   lineObjs.push(newLineObjs[l5]);
		   }
	   }
	   drawCircles();
	   //重置本条折线连线
	   var curDragLines=dragLines;
	   dragLines=[];
	   for(var d=0;d<curDragLines.length;d++){
		   if(curDragLines[d].leftX==oldLine.obj1.x && curDragLines[d].leftY==oldLine.obj1.y
				   &&curDragLines[d].rightX==oldLine.obj2.x && curDragLines[d].rightY==oldLine.obj2.y){
			   continue;
		   }else{
			   dragLines.push(curDragLines[d]);
		   }
	   }
	   
		var oldStr={};
		oldStr.lineId=oldLine.lineId;
		oldStr.leftX=oldLine.obj1.x;
		oldStr.leftY=oldLine.obj1.y;
		oldStr.rightX=clickX;
		oldStr.rightY=clickY;
		dragLines.push(oldStr);
 	  
		var oldEnd={};
		oldEnd.lineId=oldLine.lineId;
		oldEnd.leftX=clickX;
		oldEnd.leftY=clickY;
		oldEnd.rightX=oldLine.obj2.x;
		oldEnd.rightY=oldLine.obj2.y;
		dragLines.push(oldEnd);

 	   for(var t=0;t<dragLines.length;t++){
 		   context.beginPath();
 		   context.setLineDash([10,5])
 		   context.fillStyle='black';
 		   //设置对象起始点和终点
 		   context.moveTo(dragLines[t].leftX,dragLines[t].leftY);
		   context.lineTo(dragLines[t].rightX,dragLines[t].rightY);
 		   //设置样式
 		   context.lineWidth = 2;
 		   context.strokeStyle = "#C5C5C5";
 		   context.stroke();
 	   }
 	  dragOneLines=[];
    }
    if(previousSelectedCircle == null||moveAllObjs==null){
        return;
    }
  //  var chooseObj = null;
    //单元 
    if(moveAllObjs.isDragLevle3){
    	dragOneLines=[];
    	moveAllObjs.isDragLevle3=false;
    	 for(var i = 0 ; i < canvasAllLevel2.length; i++) {
    	        var circle = canvasAllLevel2[i];
    	        if(clickX >= circle.x && clickX+previousSelectedCircle.width/2 <= circle.x + circle.width && clickY >= circle.y && clickY+previousSelectedCircle.height/2 <= circle.y + circle.height 
    	        		&& circle.board.id==previousSelectedCircle.params.boardId){
    	            //选中了这个元素
    	            isChooseOneObj = true;
    	           // chooseObj = circle;
    	            break;
    	        }
    	    }
    	// 判断这个点是否在对象中
	        if(isChooseOneObj){
	        	canvasAllLevel3[moveAllObjs.oldIndex].px_+=moveAllObjs.x-canvasAllLevel3[moveAllObjs.oldIndex].x;
	        	canvasAllLevel3[moveAllObjs.oldIndex].py_+=moveAllObjs.y-canvasAllLevel3[moveAllObjs.oldIndex].y;
	        	canvasAllLevel3[moveAllObjs.oldIndex].x_+=moveAllObjs.x-canvasAllLevel3[moveAllObjs.oldIndex].x;
	        	canvasAllLevel3[moveAllObjs.oldIndex].y_+=moveAllObjs.y-canvasAllLevel3[moveAllObjs.oldIndex].y;
	        	canvasAllLevel3[moveAllObjs.oldIndex].x=moveAllObjs.x;
	        	canvasAllLevel3[moveAllObjs.oldIndex].y=moveAllObjs.y;
	        	
	        	//更新显示
	        	
	        	
	        	drawCircles();
	        	/*if(e.data.fun6){
	    			e.data.fun6(canvasAllLevel3[moveAllObjs.oldIndex]);
	    		}*/
	        	lineObjs=[];
	        	drawAllLine();
	        	moveAllObjs={};
	        	previousSelectedCircle={};
	        	//停止搜索
	        	return;
	        }else{
	        	previousSelectedCircle.x = chooseObjInitPlace.x;
	        	previousSelectedCircle.y = chooseObjInitPlace.y;
	        	drawCircles();
	        }
    }
    //板卡
   if(moveAllObjs.isDragLevle2){
	   dragOneLines=[];
	   moveAllObjs.isDragLevle2=false;
	   for(var i = 0 ; i < canvasAllLevel1.length; i++) {
	    	var circle = canvasAllLevel1[i];
	    	if(clickX >= circle.x && clickX+previousSelectedCircle.width/2 <= circle.x + circle.width && clickY >= circle.y && clickY+previousSelectedCircle.height/2 <= circle.y + circle.height 
	    			&& circle.id==previousSelectedCircle.board.machineBoxId){
	    		//选中了这个元素
	    		isChooseOneObj = true;
	    	//	chooseObj = circle;
		        break;
	    	}
	    }
	   // 判断这个点是否在对象中
       if(isChooseOneObj){
    	 var oldx=moveAllObjs.x-canvasAllLevel2[moveAllObjs.oldIndex].x;
    	 var oldy=moveAllObjs.y-canvasAllLevel2[moveAllObjs.oldIndex].y;
    	canvasAllLevel2[moveAllObjs.oldIndex].x_+=moveAllObjs.x-canvasAllLevel2[moveAllObjs.oldIndex].x;
       	canvasAllLevel2[moveAllObjs.oldIndex].y_+=moveAllObjs.y-canvasAllLevel2[moveAllObjs.oldIndex].y;
       	canvasAllLevel2[moveAllObjs.oldIndex].x=moveAllObjs.x;
       	canvasAllLevel2[moveAllObjs.oldIndex].y=moveAllObjs.y;
       	//同时修改本板卡下的CPU位置
       
       		for(var k2=0;k2<canvasAllLevel3.length;k2++){
       			if(moveAllObjs.id==canvasAllLevel3[k2].params.boardId){
       				canvasAllLevel3[k2].x=canvasAllLevel2[moveAllObjs.oldIndex].x+canvasAllLevel3[k2].x_;
       				canvasAllLevel3[k2].y=canvasAllLevel2[moveAllObjs.oldIndex].y+canvasAllLevel3[k2].y_;
       				canvasAllLevel3[k2].px_+=oldx;
       				canvasAllLevel3[k2].py_+=oldy;
       			}
       		}
       	//更新显示
       	drawCircles();
       	/*if(e.data.fun6){
			e.data.fun6(canvasAllLevel2[moveAllObjs.oldIndex]);
		}*/
    	lineObjs=[];
    	drawAllLine();
    	moveAllObjs={};
    	previousSelectedCircle={};
       	//停止搜索
       	return;
       }else{
       	previousSelectedCircle.x = chooseObjInitPlace.x;
       	previousSelectedCircle.y = chooseObjInitPlace.y;
       	drawCircles();
       }
   }
   //主机
   if(moveAllObjs.isDragLevle1){
	   dragOneLines=[];
	   moveAllObjs.isDragLevle1=false;
	   if(clickX >= canvas.offsetLeft && clickX+previousSelectedCircle.width/2 <= canvas.offsetLeft + canvas.width && clickY >= canvas.offsetTop && clickY+previousSelectedCircle.height/2 <= canvas.offsetTop + canvas.height){
           //选中了这个元素
           isChooseOneObj = true;
          // chooseObj = circle
       }
       // 判断这个点是否在对象中
       if(isChooseOneObj){
    	var oldx=moveAllObjs.x-canvasAllLevel1[moveAllObjs.oldIndex].x;
    	var oldy=moveAllObjs.y-canvasAllLevel1[moveAllObjs.oldIndex].y;
       	canvasAllLevel1[moveAllObjs.oldIndex].x=moveAllObjs.x;
       	canvasAllLevel1[moveAllObjs.oldIndex].y=moveAllObjs.y;
    	//同时修改本板卡下的板卡和CPU位置
   		for(var l2=0;l2<canvasAllLevel2.length;l2++){
   			if(moveAllObjs.id==canvasAllLevel2[l2].board.machineBoxId){
   				canvasAllLevel2[l2].x=moveAllObjs.x+canvasAllLevel2[l2].x_;
   				canvasAllLevel2[l2].y=moveAllObjs.y+canvasAllLevel2[l2].y_;
   			}
   		}
   		for(var k2=0;k2<canvasAllLevel3.length;k2++){
   			if(moveAllObjs.id==canvasAllLevel3[k2].params.machineBoxId){
   				
   				canvasAllLevel3[k2].x=moveAllObjs.x+canvasAllLevel3[k2].px_;
   				canvasAllLevel3[k2].y=moveAllObjs.y+canvasAllLevel3[k2].py_;
   			}
   		}
       	//更新显示
       	//停止搜索
       	drawCircles();
       	/*if(e.data.fun6){
			e.data.fun6(canvasAllLevel1[moveAllObjs.oldIndex]);
		}*/
    	lineObjs=[];
    	drawAllLine();
    	moveAllObjs={};
    	previousSelectedCircle={};
       	return;
       }else{
       	previousSelectedCircle.x = chooseObjInitPlace.x;
       	previousSelectedCircle.y = chooseObjInitPlace.y;
       	drawCircles();
       }
   }
   //重画线
   moveAllObjs={};
   previousSelectedCircle={};
   isChooseOneObj = false;
   isChooseLevel3=false;
   isChooseLevel2=false;
   isChooseLevel1=false;
   isExpandLevel1=false;
   isExpandLevel2=false;
}
/**画折线*/
function addPolyline(polyline){
	//dragLines=[];
	   for(var t=0;t<polyline.length;t++){
		   polyline[t].lineId=polyline.physicalLinkID
		   dragLines.push(polyline[t]);
		   context.beginPath();
		   context.setLineDash([10,5])
		   context.fillStyle='black';
		   //设置对象起始点和终点
		   context.moveTo(polyline[t].leftX,polyline[t].leftY);
		   context.lineTo(polyline[t].rightX,polyline[t].rightY);
		   //设置样式
		   context.lineWidth = 2;
		   context.strokeStyle = "#C5C5C5";
		   context.stroke();
	   }
}
/**画折线*/
function addPolyline2(polylines){
	   for(var t=0;t<polylines.length;t++){
		   polylines[t].lineId=polylines[t].lineId;
		   dragLines.push(polylines[t]);
		   context.beginPath();
		   context.setLineDash([10,5])
		   context.fillStyle='black';
		   //设置对象起始点和终点
		   context.moveTo(polylines[t].leftX,polylines[t].leftY);
		   context.lineTo(polylines[t].rightX,polylines[t].rightY);
		   //设置样式
		   context.lineWidth = 2;
		   context.strokeStyle = "#C5C5C5";
		   context.stroke();
	   }
	   oldDragLines=[];
}
/**
 *	新增一个一级元素
 */
function addCanvasLevel1(index , funs){
    var title = '';
    var canvasAllLevel1Obj = {};
    canvasAllLevel1Obj.count = 0;
    canvasAllLevel1Obj.id = funs.id;
    canvasAllLevel1Obj.machineBox = funs;
    canvasAllLevel1Obj.index = canvasAllLevel1.length;

    canvasAllLevel1Obj.y = 40;
    title = '主机'+index;
    if(funs.machineBoxName){
    	title=funs.machineBoxName;
    }
    canvasAllLevel1Obj.title = title;
    canvasAllLevel1Obj.width = 260;
    canvasAllLevel1Obj.height = 380;
    //主机-板卡 最多两个
    if(canvasAllLevel1.length >= 2){
        //最多有两个 不能继续增加了
        alert('有两个主机了!!')
        drawCircles();
        return ;
    }else if(canvasAllLevel1.length == 0){
        //可以增加 如果没有过主机 给他放第一个位置
        canvasAllLevel1Obj.x = 50;
    }else if(canvasAllLevel1.length == 1){
        //如果有一个主机 算一下第一个主机的宽度 给他放到第二个位置
        canvasAllLevel1Obj.x = (canvasAllLevel1[0].x + canvasAllLevel1[0].width + 80);
    }
    canvasAllLevel1.push(canvasAllLevel1Obj);
    var height = canvas.height;
	if(canvasAllLevel1Obj.y +canvasAllLevel1Obj.height +40> height){
		canvas.height = canvasAllLevel1Obj.y + canvasAllLevel1Obj.height+60;
	}
    var width = canvas.width;
	if(canvasAllLevel1Obj.x +canvasAllLevel1Obj.width +40> width){
		canvas.width = canvasAllLevel1Obj.x + canvasAllLevel1Obj.width+60;
	}
}

/**
 *	新增一个二级元素
 */
function addCanvasLevel2(pindex , index,funs){
    var canvasAllLevel2Obj = {};
    canvasAllLevel2Obj.count = 0;
    canvasAllLevel2Obj.id = funs.id;
    canvasAllLevel2Obj.pIndex = pindex;
    canvasAllLevel2Obj.index = index;
    canvasAllLevel2Obj.board = funs;

    for(var i = 0 ; i < canvasAllLevel1.length ; i++){
        var obj = canvasAllLevel1[i];
        if(obj.index == pindex){
            pindex = i;
        }
    }
    var oldindex2=index;
    //计算各种位置
    //查看本一级下有几个二级
    if(canvasType == 1 || canvasType == 3){

        canvasAllLevel2Obj.width = 200;
        canvasAllLevel2Obj.height =250;
        
        // 	主机-板卡 一排四个
        var myCount = index;
        var curNo=myCount+1;
        title2 = '板卡'+curNo;
        if(funs.boardName){
        	title2=funs.boardName;
        }
        canvasAllLevel2Obj.title2 = title2;
        canvasAllLevel1[pindex].count = myCount+1;
        //计算我这个一级的宽度
        if(myCount > 3){
            //宽度固定了  判断是否需要改变主机的高度
            if(myCount % 4 == 0){
                //另起一排 增加本主机的高度
                canvasAllLevel1[pindex].height = canvasAllLevel1[pindex].height + 280;
                canvasAllLevel2Obj.y = canvasAllLevel1[pindex].y + 80 + 280*((myCount -( myCount%4)) / 4);
                canvasAllLevel2Obj.x = canvasAllLevel1[pindex].x + 30;
            }else{
                canvasAllLevel2Obj.y = canvasAllLevel1[pindex].y + 80 + 280*((myCount -( myCount%4)) / 4);
                canvasAllLevel2Obj.x = canvasAllLevel1[pindex].x + 30 + 240*(myCount%4);
            }
        }else{
            canvasAllLevel2Obj.y = 130;
            //不足四个 第一排增加元素 主机宽度增加 如果是一个元素并且有第二个主机 第二个主机往右移动
            if(myCount != 0){
                canvasAllLevel1[pindex].width = canvasAllLevel1[pindex].width + 240;
                canvasAllLevel2Obj.x = canvasAllLevel1[pindex].x + 30 + 240*myCount;
            }else{
                canvasAllLevel2Obj.x = canvasAllLevel1[pindex].x + 30;
            }
            if(index == 0 && canvasAllLevel1.length == 2){
                //是一个元素并且有第二个主机 第二个主机往右移动
                canvasAllLevel1[1].x = (canvasAllLevel1[0].x + canvasAllLevel1[0].width + 80);
            }
        }
    }
    if(index<4){
		if(index-1>=0 && canvasAllLevel2[canvasAllLevel2.length-1].height>250){
			canvasAllLevel2Obj.height=canvasAllLevel2[canvasAllLevel2.length-1].height;
		}
	}
	if(index>=4){
		if(index%4==0){
			canvasAllLevel2Obj.y=canvasAllLevel2[canvasAllLevel2.length-4].y+canvasAllLevel2[canvasAllLevel2.length-4].height+30;
		}else if(index%4==1){
			canvasAllLevel2Obj.y=canvasAllLevel2[canvasAllLevel2.length-1].y;
			canvasAllLevel2Obj.height=canvasAllLevel2[canvasAllLevel2.length-1].height;
		}else if(index%4==2){
			canvasAllLevel2Obj.y=canvasAllLevel2[canvasAllLevel2.length-1].y;
			canvasAllLevel2Obj.height=canvasAllLevel2[canvasAllLevel2.length-1].height;
		}else if(index%4==3){
			canvasAllLevel2Obj.y=canvasAllLevel2[canvasAllLevel2.length-1].y;
			canvasAllLevel2Obj.height=canvasAllLevel2[canvasAllLevel2.length-1].height;
		}
	}
    canvasAllLevel2Obj.x_=canvasAllLevel2Obj.x-canvasAllLevel1[pindex].x;
    canvasAllLevel2Obj.y_=canvasAllLevel2Obj.y-canvasAllLevel1[pindex].y;
    canvasAllLevel2.push(canvasAllLevel2Obj);
    var height = canvas.height;
	if(canvasAllLevel1[pindex].y +canvasAllLevel1[pindex].height+40> height){
		canvas.height = canvasAllLevel1[pindex].y + canvasAllLevel1[pindex].height+50;
	}
	var width = canvas.width;
	if(canvasAllLevel1[pindex].x +canvasAllLevel1[pindex].width+40> width){
		canvas.width = canvasAllLevel1[pindex].x + canvasAllLevel1[pindex].width+50;
	}

    //回调函数
    //drawCircles();
}

/**
 *	新增一个三级元素
 *1.二级元素的数据中的索引  2.所属的一级元素的index  3.回调函数
 */
function addCanvasLevel3(ppIndex ,pIndex,Index,img, funs){
    var canvasAllLevel3Obj = {};

    canvasAllLevel3Obj.ppIndex = ppIndex;
    canvasAllLevel3Obj.id = funs.id;
    canvasAllLevel3Obj.width = 60;
    canvasAllLevel3Obj.height = 60;
    canvasAllLevel3Obj.params =funs;
    var oldPindex=pIndex;
    if(img != null){
    	canvasAllLevel3Obj.img = img;
    }
    for(var i = 0 ; i < canvasAllLevel2.length ; i++){
        var obj = canvasAllLevel2[i];
        if(obj.index == pIndex && obj.pIndex == ppIndex){
            pIndex = i;
        }
    }
    canvasAllLevel3Obj.pIndex = pIndex;
    //	板卡-处理单元 一排两个 最多四个
    var myCount = Index;
    
    if(myCount >= 8){
        //一个板卡中最多有四个处理单元
        alert('一个板卡最多8个处理单元');
        return;
    }else{
        canvasAllLevel2[pIndex].count = myCount+1;
        //在我这个板卡中 有四个位置 看看是在哪个区域内
        if(myCount % 2 == 0){
            //另起一排 增加本主机的高度
            //canvasAllLevel1[index].height = canvasAllLevel1[index].height + 120;
            canvasAllLevel3Obj.y = canvasAllLevel2[pIndex].y + 60 + 80*(myCount / 2);
            canvasAllLevel3Obj.x = canvasAllLevel2[pIndex].x + 30;
            if(myCount>3 && myCount/2==2  &&canvasAllLevel2[pIndex].height<310){
            	canvasAllLevel2[pIndex].height+=70;
            	canvasAllLevel1[ppIndex].height+=70;

            }else  if(myCount>5 && myCount/2==3  &&canvasAllLevel2[pIndex].height<390){
            	canvasAllLevel2[pIndex].height+=70;
            	canvasAllLevel1[ppIndex].height+=70;

            }
        }else{
            canvasAllLevel3Obj.y = canvasAllLevel2[pIndex].y + 60 + 80*((myCount -( myCount%2)) / 2);
            canvasAllLevel3Obj.x = canvasAllLevel2[pIndex].x + 30 + 80*(myCount%2);
        }
    }
    //统一同排板卡的高度
    changHeight(myCount,pIndex,oldPindex);

    canvasAllLevel3Obj.x_=canvasAllLevel3Obj.x-canvasAllLevel2[pIndex].x;//板卡x偏移
    canvasAllLevel3Obj.y_=canvasAllLevel3Obj.y-canvasAllLevel2[pIndex].y;//板卡y偏移
    canvasAllLevel3Obj.px_=canvasAllLevel3Obj.x-canvasAllLevel1[ppIndex].x;//主机x偏移
    canvasAllLevel3Obj.py_=canvasAllLevel3Obj.y-canvasAllLevel1[ppIndex].y;//主机y偏移
    canvasAllLevel3.push(canvasAllLevel3Obj);
    //回调函数
   //drawCircles();
    var height = canvas.height;
	if(canvasAllLevel1[ppIndex].y +canvasAllLevel1[ppIndex].height+40> height){
		canvas.height = canvasAllLevel1[ppIndex].y + canvasAllLevel1[ppIndex].height+50;
	}
	var width = canvas.width;
	if(canvasAllLevel1[ppIndex].x +canvasAllLevel1[ppIndex].width+40> width){
		canvas.width = canvasAllLevel1[ppIndex].x + canvasAllLevel1[ppIndex].width+50;
	}
}

//统一同排板卡的高度
function changHeight(myCount,index,oldIndex){
   	 //统一同排板卡的高度
   	//获取最大高度
       var maxHeight=canvasAllLevel2[index].height;
       var machineId=canvasAllLevel2[index].board.machineBoxId;
       //获得同排元素
       canvasCurObjs=[];
       for(var k=0;k<canvasAllLevel2.length;k++){
       	if(canvasAllLevel2[k].y==canvasAllLevel2[index].y && canvasAllLevel2[k].board.machineBoxId==machineId){
       		canvasCurObjs.push(canvasAllLevel2[k]);
       		if(maxHeight<canvasAllLevel2[k].height){
           		maxHeight=canvasAllLevel2[k].height;
           	}
       	}
       }
     //重置同排高度
       for(var k3=0;k3<canvasAllLevel2.length;k3++){
       	for(var k4=0;k4<canvasCurObjs.length;k4++){
       		if(canvasCurObjs[k4].board.id==canvasAllLevel2[k3].board.id && canvasCurObjs[k4].board.machineBoxId==machineId){
       			canvasAllLevel2[k3].height=maxHeight;
   			}
       	}
       }
       //修改下面各排的位置
       if(myCount>3 && index==oldIndex){
    	   if(index%4==3 && canvasAllLevel2[index+1]!=null && canvasAllLevel2[index+1].board.machineBoxId==machineId){
    		   for(var c1=index+1;c1<canvasAllLevel2.length;c1++){
    			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){

    				   for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
            		   }
    			   }
    		   }
    	   }
    	   if(index%4==2 && canvasAllLevel2[index+2]!=null && canvasAllLevel2[index+2].board.machineBoxId==machineId){
    		   for(var c1=index+2;c1<canvasAllLevel2.length;c1++){
    			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){

    				   for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
            		   }
    			   }
    		   }
    	   }
    	   if(index%4==1 && canvasAllLevel2[index+3]!=null && canvasAllLevel2[index+3].board.machineBoxId==machineId){
    		   for(var c1=index+3;c1<canvasAllLevel2.length;c1++){
    			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){

    				   for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
            		   }
    			   }
    		   }
    	   }
    	   if(index%4==0 && canvasAllLevel2[index+4]!=null && canvasAllLevel2[index+4].board.machineBoxId==machineId){
    		   for(var c1=index+4;c1<canvasAllLevel2.length;c1++){
    			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){

    				   for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
            		   }
    			   }
    		   }
    	   }
       }
       if(myCount>3 && index!=oldIndex){
    	   if(oldIndex%4==3 && canvasAllLevel2[index+1]!=null && canvasAllLevel2[index+1].board.machineBoxId==machineId){
    		   for(var c1=index+1;c1<canvasAllLevel2.length;c1++){
    			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){

    				   for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
            		   }
    			   }
    		   }
    	   }
    	   if(oldIndex%4==2 && canvasAllLevel2[index+2]!=null && canvasAllLevel2[index+2].board.machineBoxId==machineId){
    		   for(var c1=index+2;c1<canvasAllLevel2.length;c1++){
    			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){

    				   for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
            		   }
    			   }
    		   }
    	   }
    	   if(oldIndex%4==1 && canvasAllLevel2[index+3]!=null && canvasAllLevel2[index+3].board.machineBoxId==machineId){
    		   for(var c1=index+3;c1<canvasAllLevel2.length;c1++){
    			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){

    				   for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
            		   }
    			   }
    		   }
    	   }
    	   if(oldIndex%4==0 && canvasAllLevel2[index+4]!=null && canvasAllLevel2[index+4].board.machineBoxId==machineId){
    		   for(var c1=index+4;c1<canvasAllLevel2.length;c1++){
    			   if(canvasAllLevel2[c1].board.machineBoxId==machineId){
    				  
    				   for(var c2=0;c2<canvasAllLevel3.length;c2++){
	        			   if(canvasAllLevel3[c2].cpu.boardId==canvasAllLevel2[c1].id){
	        				   canvasAllLevel3[c2].y=canvasAllLevel2[c1].y+canvasAllLevel3[c2].y_;
	        			   }
            		   }
        			  
    			   }
    		   }
    	   }
       }
}
/**
 *	新增一个四级元素 放到某三级中 删除原来的元素
 *	obj1 四级元素的信息
 *	obj2 三级元素
 */
function addCanvasLevel4(obj1 , obj2){
	if(tuoIndex != -1){
		circles.splice(tuoIndex,1);
	}
    var canvasAllLevel4Obj = {};
    canvasAllLevel4Obj.x = obj2.x;
    canvasAllLevel4Obj.y = obj2.y;
    canvasAllLevel4Obj.img = obj1.img;
    canvasAllLevel4Obj.id = obj1.id;
    canvasAllLevel4Obj.width = obj2.width;
    canvasAllLevel4Obj.height = obj2.height;
    canvasAllLevel4Obj.pId = obj2.id;
    canvasAllLevel4.push(canvasAllLevel4Obj);
}

/**
 *	画线 共通算法 包括拖拽跟随也是这个
 */
function DrawLine(obj1Place , obj2Place , count ,  context){

    var xDiff = obj1Place.x - obj2Place.x;
    var yDiff = obj1Place.y - obj2Place.y;
    xDiff = Math.abs(xDiff);//x差绝对值
    yDiff = Math.abs(yDiff);//y差绝对值
    var line1End = {};//第一条线的结束点
    var line2Start = {};//第二条线的开始点
    var textPlace = {};
    //分为四种情况
    if(obj1Place.x >= obj2Place.x && obj1Place.y >= obj2Place.y){
        line2Start.x = obj1Place.x - xDiff * 3 / 5;
        line2Start.y = obj1Place.y - yDiff * 3 / 5;

        line1End.x = obj1Place.x - xDiff * 2 / 5;
        line1End.y = obj1Place.y - yDiff * 2 / 5;

        textPlace.x = line1End.x - xDiff * 1 / 10;
        textPlace.y = line1End.y - yDiff * 1 / 10;
    }else if(obj1Place.x >= obj2Place.x && obj1Place.y <= obj2Place.y){
        line2Start.x = obj1Place.x - xDiff * 3 / 5;
        line2Start.y = obj1Place.y + yDiff * 3 / 5;

        line1End.x = obj1Place.x - xDiff * 2 / 5;
        line1End.y = obj1Place.y + yDiff * 2 / 5;

        textPlace.x = line1End.x - xDiff * 1 / 10;
        textPlace.y = line1End.y + yDiff * 1 / 10;
    }else if(obj1Place.x <= obj2Place.x && obj1Place.y >= obj2Place.y){
        line2Start.x = obj1Place.x + xDiff * 3 / 5;
        line2Start.y = obj1Place.y - yDiff * 3 / 5;

        line1End.x = obj1Place.x + xDiff * 2 / 5;
        line1End.y = obj1Place.y - yDiff * 2 / 5;

        textPlace.x = line1End.x + xDiff * 1 / 10;
        textPlace.y = line1End.y - yDiff * 1 / 10;
    }else if(obj1Place.x <= obj2Place.x && obj1Place.y <= obj2Place.y){
        line2Start.x = obj1Place.x + xDiff * 3 / 5;
        line2Start.y = obj1Place.y + yDiff * 3 / 5;

        line1End.x = obj1Place.x + xDiff * 2 / 5;
        line1End.y = obj1Place.y + yDiff * 2 / 5;

        textPlace.x = line1End.x + xDiff * 1 / 10;
        textPlace.y = line1End.y + yDiff * 1 / 10;
    }
    context.beginPath();
    //context.setLineDash([10,5])
    context.fillStyle='black';
    //设置对象起始点和终点
    context.moveTo(obj1Place.x,obj1Place.y);
    context.lineTo(obj2Place.x,obj2Place.y);
    //设置样式
   context.lineWidth = 1;
    context.strokeStyle = "#C5C5C5";
    context.stroke();
}

/**
 *	十字连线的时候的方法
 */
function DrawLine2(obj , context){
    context.beginPath();
    context.setLineDash([5,5])
    context.fillStyle='black';
    //设置对象起始点和终点
    context.moveTo(obj.startx,obj.starty);
    context.lineTo(obj.endx,obj.endy);
    //设置样式
    context.lineWidth = 2;
    context.strokeStyle = "#C5C5C5";
    //绘制
    context.stroke();
}
/**
 *	增加或取消连线的数据
 */
function addLineOrCancel(obj1 , obj2 ,count,funs){
    var isLine = true;
    var lineIndex = -1;
    var param;
    if(funs.param){
    	param = funs.param;
    }
    var paramAll;
    if(funs.paramAll){
    	paramAll = funs.paramAll;
    }
    for(var i = 0 ; i < lineObjs.length ; i++){
        var lineObj = lineObjs[i];
        if(lineObj.obj1.x == obj1.x && lineObj.obj1.y == obj1.y && lineObj.obj2.x == obj2.x && lineObj.obj2.y == obj2.y ){
            //已经连线过 删除这条线 A连B 和 B连A 都要取消
            lineIndex = i;
            break;
        }else if(lineObj.obj1.x == obj2.x && lineObj.obj1.y == obj2.y && lineObj.obj2.x == obj1.x && lineObj.obj2.y == obj1.y){
            lineIndex = i;
            break;
        }
    }
    if(lineIndex == -1){
        lineObjs.push({obj1:obj1 , obj2:obj2 , count:count,param:param,paramAll:paramAll});
        if(funs != null && funs.fun1){
            funs.fun1(obj1 , obj2);
        }
    }else{
        if(previousSelectedCircleStartLine != null){
            //已经连线过
            alert("这两个元素已经连线了!")
            return;
        }
        var newLines = new Array();
        for(var i = 0 ; i < lineObjs.length ; i++){
            var lineObj = lineObjs[i];
            if(i != lineIndex){
                // 删除这条线
                var newLine = {obj1:lineObj.obj1 , obj2:lineObj.obj2 , count:count,param:param,paramAll:paramAll};
                newLines.push(newLine);
            }
        }
        lineObjs = newLines;
        if(funs != null && funs.fun2){
            funs.fun2(obj1 , obj2);
        }
    }
}
/**
 *	两个CPU 端口连线
 *	obj1 : 	拖拽的元素
 *	obj2:	被动链接的元素
 *	index1:	1号元素的端口号
 *	index2:	2号元素的端口号
 */
function doLine2(obj1 , obj2 ,count,index1 , index2 , funs){
    var obj1Place = {};
    var obj2Place = {};
    obj1Place.x = obj1.x + obj1.width / 2 + CPUXYS[index1].X;
    obj1Place.y = obj1.y + obj1.height / 2 + CPUXYS[index1].Y;
    obj1Place.id = obj1.id;
    obj2Place.x = obj2.x + obj2.width / 2 + CPUXYS[index2].X;
    obj2Place.y = obj2.y + obj2.height / 2 + CPUXYS[index2].Y;
    obj2Place.id = obj2.id;
    addLineOrCancel(obj1Place , obj2Place ,count,funs);
}
/**
 *	两个元素中的中心进行连线
 *	obj1 : 	拖拽的元素
 *	obj2:	被动链接的元素
 */
function doLine(obj1 , obj2 ,count , funs){
   
    var obj1Place = {};
    var obj2Place = {};
    obj1Place.x = obj1.x + obj1.width / 2;
    obj1Place.y = obj1.y + obj1.height / 2;
    obj1Place.id = obj1.id;
    obj2Place.x = obj2.x + obj2.width / 2;
    obj2Place.y = obj2.y + obj2.height / 2;
    obj2Place.id = obj2.id;
    addLineOrCancel(obj1Place , obj2Place , count ,funs);
}

/**
 *	画线  重置点击 拖拽事件
 */
function setDrawLine(cursorstyle, fun1 , fun2 , obj) {
    var clicktype = obj.attr('clicktype');
    if(clicktype == "1"){
        //想要连线
        // obj.attr('clicktype','2');
        if (document.getElementById('myCanvas').style) {
            document.getElementById('myCanvas').style.cursor=cursorstyle;
        }
        var funObj = {fun1:fun1,fun2:fun2};
        $(canvas).unbind('mousedown').bind('mousedown', canvasLineClick);
        $(canvas).unbind('mouseup').bind('mouseup' , funObj , outMouseLineDragging);
        $(canvas).unbind('mouseout').bind('mouseout' , funObj , outMouseLineDragging);
        $(canvas).unbind('mousemove').bind('mousemove' , dragLineCircle);
    }else{
        //点完连线后不想连线了
        cancelDrawLine();
    }
}

/**
 *	连上线了之后 重置拖拽事件
 */
function cancelDrawLine(){
    if (document.getElementById('myCanvas').style) {
        document.getElementById('myCanvas').style.cursor='pointer';
    }

    var funObj = {fun1:canvasInitData.fun1,fun2:canvasInitData.fun2};
    $(canvas).unbind('mousedown').bind('mousedown', canvasClick);
    /* $(canvas).unbind('mouseup').bind('mouseup' , funObj , outMouseDragging);
    $(canvas).unbind('mouseout').bind('mouseout' , funObj , outMouseDragging); */
    $(canvas).unbind('mousemove').bind('mousemove' , dragCircle);
}

/**
 *	画线的时候 点击画布 查找有无选中的对象
 *
 */
function canvasLineClick(e) {
    // 取得画布上被单击的点
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320+curX;
    var clickY = e.pageY - canvas.offsetTop-70+curY;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < canvasAllLevel3.length; i++) {
        var circle = canvasAllLevel3[i];
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            previousSelectedCircleStartLine = circle;
            initDomPlace(canvasAllLevel3,i);
            break;
        }
    }
    // 判断这个点是否在对象中
    if(isChooseOneObj){

    }else{
        previousSelectedCircleStartLine = null;
        alert("未选中一个对象!");
    }
}
/**
 *	画线的时候 松开鼠标的时候看看有没有元素选中 有的话 连线
 */
function outMouseLineDragging(e){
    // 取得画布上被单击的点
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320+curX;
    var clickY = e.pageY - canvas.offsetTop-70+curY;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < oldCircles.length; i++) {
        var circle = oldCircles[i];
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            previousSelectedCircleEndLine = circle;
            break;
        }
    }
    // 判断这个点是否在对象中
    if(isChooseOneObj){
        //放开鼠标的时候 也有元素 让这两个元素 连线
        doLine(previousSelectedCircleStartLine , previousSelectedCircleEndLine , 0 ,e.data);
        previousSelectedCircleStartLine = null;
        drawLineObj = {};
        drawCircles();
        cancelDrawLine();
    }else{
        if(previousSelectedCircleStartLine != null){
            previousSelectedCircleStartLine = null;
            drawLineObj = {};
            drawCircles();
            alert("未选中一个对象!");
        }
    }
}
var drawLineObj = {};
/**
 *	画线
 */
function dragLineCircle(e){
	var curX=$(".table-box").scrollLeft();
	var curY=$(".table-box").scrollTop();
    var clickX = e.pageX - canvas.offsetLeft-320+curX;
    var clickY = e.pageY - canvas.offsetTop-70+curY;
    // 判断拖拽对象是否存在
    if (previousSelectedCircleStartLine != null) {
        // 	取得鼠标位置
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;
        //	画一条线 起点是选中元素的中心 终点是鼠标的位置
        drawLineObj.startx = previousSelectedCircleStartLine.x + previousSelectedCircleStartLine.width/2;
        drawLineObj.starty = previousSelectedCircleStartLine.y + previousSelectedCircleStartLine.height/2;
        drawLineObj.endx = clickX;
        drawLineObj.endy = clickY;

        // 更新画布
        drawCircles();
    }
}

/**
 *	增加选中的边框的方法
 */
function addCanvasAllLevelObj(id,secletLevel){
	cancelChoose();
	
    var newObj = {};
    var objj={};
    if(secletLevel==1){
    	 for(var i=0;i<canvasAllLevel1.length;i++){
	    	if(canvasAllLevel1[i].machineBox.id==id){
	    	    objj= canvasAllLevel1[i];
	    	    break;
	    	}
	    }
    }
    if(secletLevel==2){
    	 for(var i=0;i<canvasAllLevel2.length;i++){
	    	if(canvasAllLevel2[i].board.id==id){
	    	    objj= canvasAllLevel2[i];
	    	    break;
	    	}
	    }
    }
    if(secletLevel==3){
    	for(var i=0;i<canvasAllLevel3.length;i++){
        	if(canvasAllLevel3[i].id==id){
        	    objj= canvasAllLevel3[i];
        	    break;
        	}
        }
    }
   
	 newObj.x = objj.x-5;
    newObj.y = objj.y-5;
    newObj.width = objj.width+10;
    newObj.height = objj.height+10;
    newObj.level = secletLevel;
    newObj.index = id;
    newObj.color='#029FE8';
    //canvasAllLevelObj.push(newObj);
    // 遍历所有框
    	 var circle = newObj;
         // 绘制对象
         context.beginPath();
         context.lineWidth = 1;
         context.setLineDash([1,0]);
         if(circle.color){
             context.strokeStyle = circle.color;
         }else{
             context.strokeStyle = '#eeeeee';
         }
         context.strokeRect(circle.x,circle.y ,circle.width , circle.height);
         context.stroke();
}
/**
 *	取消选中的颜色
 */
function cancelChoose(){
    /*for(var i = 0 ; i < canvasAllLevelObj.length ; i++){
    	
        var obj = canvasAllLevelObj[i];
        if(obj.color=='#009EE7'){
        	obj.color=="#eeeeee";
        }
    }*/
    canvasAllLevelObj = [];
}